<template>
  <div>
    <el-button type="success" @click="AddRouter">添加</el-button>
    <br />
    <br />
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="" type="index" label="编号" align="center" />
      <el-table-column prop="userName" label="用户名" align="center" />
      <el-table-column prop="roleName" label="角色名称" align="center" />
      <el-table-column prop="sex" label="性别" align="center">
        <template v-slot="scoped">
          <span v-if="scoped.row.sex == false">{{ "男" }}</span>
          <span v-else>{{ "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="provinceId" label="所在省份" align="center">
        <template #default="{ row }">
          {{ getLabelByValue1(row.provinceId) }}
        </template>
      </el-table-column>
      <el-table-column prop="cityId" label="所在市" align="center">
        <template #="{ row }">
          {{ getLabelByValue2(row.cityId) }}
        </template>
      </el-table-column>
      <el-table-column prop="countyId" label="所在县" align="center">
        <template v-slot="scoped">
          {{ getLabelByValue3(scoped.row.countyId) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="hamletName"
        label="详细地址"
        align="center"
        show-overflow-tooltip
      >
        <template v-slot="scoped">
          <!-- {{ (scoped.row.hamletName).slice(0, 4) + "****" }} -->
          {{ scoped.row.hamletName }}
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column prop="createTime" label="创建日期" align="center">
        <template v-slot="scoped">
          {{ moment(scoped.row.createTime).format("YYYY年MM月DD日 HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="updateName" label="修改人" align="center" />
      <el-table-column prop="updateTime" label="修改日期" align="center">
        <template v-slot="scoped">
          <span v-if="!scoped.row.updateTime"></span>
          <span v-else>{{
            moment(scoped.row.updateTime).format("YYYY年MM月DD日")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作" width="140" align="center">
        <template v-slot="scoped">
          <el-button
            type="warning"
            size="small"
            @click="UpDateRouter(scoped.row.userId)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="Del(scoped.row.userId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- {{ tableData }} -->
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { regionData } from "element-china-area-data"; //引入
import { useCounterStore } from "@/stores/counter";

console.log(regionData);
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
//添加条转
const AddRouter = () => {
  router.push("/UserCreateView");
};
//修改跳转console
const UpDateRouter = (ids: any) => {
  // console.log(ids)
  store.ccstore.updateId = ids;
  router.push({
    name: "UpdateUserView",
  });
};

//显示
const tableData = ref([]);
const show = () => {
  axios.get("https://localhost:7174/api/Message/GetUser", {}).then((res) => {
    tableData.value = res.data.data;
    // console.log(res)
  });
  // console.log(tableData)
};

//#region 省市县显示
//储存读信息
const datas: any = reactive({
  label1: {},
  label2: {},
  label3: {},
});

// 根据 value 查找对应的 label省
const getLabelByValue1 = (value: any) => {
  datas.label1 = regionData.find((item) => item.value == value);
  // console.log(datas.label1.children, "datas.label1")
  return datas.label1 ? datas.label1.label : "--";
};

// 根据 value 查找对应的 label市
const getLabelByValue2 = (value: any) => {
  // console.log(value, 'Value1')
  datas.label2 = datas.label1.children.find((item: any) => item.value == value);
  console.log(datas.label2, "ok");
  return datas.label2 ? datas.label2.label : "--";
};

// 根据 value 查找对应的 label县
const getLabelByValue3 = (value: any) => {
  // console.log(value, 'Value1')
  datas.label3 = datas.label2.children.find((item: any) => item.value == value);
  console.log(datas.label3, "ok");
  return datas.label3 ? datas.label3.label : "--";
};
//#endregion

//删除
const Del = (ids: any) => {
  ElMessageBox.confirm("你确定删除吗?", "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios
        .post("https://localhost:7272/api/Message/DelUser", {
          userId: ids,
        })
        .then((res) => {
          if (res.data.code == 204) {
            ElMessage.success(res.data.msg);
          }
          show();
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

onMounted(() => {
  show();
});
</script>

<style scoped></style>